<extend name="./Application/Home/View/Public/Base/common.html" />
<block name="title">设备管理</block>
<block name="breadcrumb">
    设备管理
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</block>
<block name="body">
    <style>
        .mk-hasbtn{
            margin-top: 40px;
            position: relative;
        }

        .page-nation-botton,.page-nation-up,.page-nation-down{
            width: 30px;
            height: 30px;
            border: 1px solid #dcdcdc;
            display: inline-block;
            margin-top: 2px;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
            cursor: pointer;
        }

        .page-nation-up,.page-nation-down{
            width: 50px;
        }

        #pageNation{
            height: 35px;
            position: absolute;
            right: 0px;
            bottom: -50px;
        }

        .table th,.table td{
            font-size: 13px;
        }

        .table th{
            background: #E0EAF6 !important;
        }

        .mk-blue{
            color: #00a2d4;
        }

        .search1-box{
            width: 270px;
            position: absolute;
            left:20px;
        }

        .search2-box{
            width: 270px;
            position: absolute;
            left:320px;
        }

        .search2-box input,.search1-box input{
            display: inline-block;
            width: 200px;
        }

        .search2-box span,.search1-box span{
            display: inline-block;
            width: 70px;
        }

        .search-button{
            position: absolute;
            left:620px;
        }

        .button-img{
            width: 18px;
            margin-bottom: 2px;
            margin-right: 5px;
        }
    </style>
    <article class="cl pd-20">
        <div class="search1-box">
            <span>设备编号:</span><input type="text" class="input-text radius size-M search1" placeholder="请输入设备编号">
        </div>
        <div class="search2-box">
            <span>设备名称:</span><input type="text" class="input-text radius size-M search2" placeholder="请输入设备名称">
        </div>
        <span class="l r search-button" >
                <a href="javascript:;" onclick="searchList()" class="btn radius" style="background: #F5F8F9;"><img  class="button-img" src="__HUI__/images/search.png">搜索</a>
        </span>
        <div class="mt-20 mk-hasbtn">
            <table class="table table-border table-bordered table-bg table-hover table-sort">
                <thead>
                <tr class="text-c">
                    <th width="20%">设备ID</th>
                    <th width="20%">设备名称</th>
                    <th width="20%">设备编号</th>
                    <th width="20%">设备虚拟化国标</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
                <tbody>
                <volist name = "array['devices']" id = 'row' key="k">
                    <tr class="text-c">
                        <td>{$row['deviceid']}</td>
                        <td>{$row['devicename']}</td>
                        <td>{$row['devicemark']}</td>
                        <td>{$row['devicegbid']}</td>
                        <td class="f-14 td-manage"><a style="text-decoration:none" class="mk-blue" onClick="toVideo('{$row[devicemark]}')" href="javascript:;" title="修改">搜索录像</a></td>
                    </tr>
                </volist>
                </tbody>
                <div id="pageNation">
                    <if condition="($pagesum gt 1) AND ($page neq 1)">
                        <span class="page-nation-up" onclick="pageUp();">上一页</span>
                    </if>
                    <if condition="$pagesum gt 1">
                        <for start="0" end="$pagesum">
                            <span class="page-nation-botton" onclick="pageGo({$i+1});">{$i+1}</span>
                        </for>
                    </if>
                    <if condition="($pagesum gt 1) AND ($pagesum gt $page)">
                        <span class="page-nation-down" onclick="pageDown();">下一页</span>
                    </if>
                    <if condition="$pagesum gt 1">
                        <span style="display: inline-block;width: 50px;border: 1px solid #cccccc;text-align: center;border-radius: 3px;background: rgb(219, 247, 253);">共{$pagesum}页</span>
                    </if>
                </div>
            </table>
        </div>
    </article>
    <script type="text/javascript">
        var page = 1;
        		if({$page}){
        			page = {$page};
        		}
        setTimeout(function(){
            $(".page-nation-botton").each(function(){
                if($(this).text() == page){
                    $(this).css("background","#DBF7FD");
                }else{
                    $(this).css("background","white");
                }
            })
        },200);

        function toVideo(a){
            window.location.href="{:U('Home/Devlist/getDevVideo')}"+"?devicemark="+a;
        }

        //上一页
        function pageUp() {
            var num;
            if(page==1){
                num = page;
            }else{
                num = page-1;
            }
            window.location.href = "{:U('Home/Devlist/index')}"+"?page="+num;
        }

        //下一页
        function pageDown(){
            var num;
            if({$pagesum}==page){
                num = page;
            }else{
                num = page+1;
            }
            window.location.href = "{:U('Home/Devlist/index')}"+"?page="+num;
        }

        //指定页
        function pageGo(num) {
            page = num;
            window.location.href = "{:U('Home/Devlist/index')}"+"?page="+num;
        }

        var searchList = function(){
            var msg1 = $(".search1").val();
            var msg2 = $(".search2").val();
            if(msg1 || msg2){
                window.location.href = "{:U('Home/Devlist/index')}"+"?devicemark="+msg1+"&devicename="+msg2;
            }else{
                layer.msg('请输入设备名或设备编号', {
                    icon: 2,
                    time: 1000
                });
            }

        }
    </script>
</block>